<template>
  
 <view class="category-list-box-page">
   <my-search @click="cateGotoSearch"></my-search>
   <view class="category-list-box">
     
     <scroll-view scroll-y="true" class="left-scroll-view" :style="{height:viewHeight + 'px'}">
       <view :class="['left-scroll-view-item ',active==index? 'active':'']" v-for="(item,index) in CategorysList" :key='index'
       @click="changeActive(index)"
       >{{item.cat_name}}</view>
     </scroll-view>
     
     <scroll-view scroll-y="true" class="right-scroll-view" :style="{height:viewHeight + 'px'}" :scroll-top="scrolltop">
       <view class="right-scroll-view-item-title" v-for="(item,index) in CategorysListLevel2" :key="index">
         <view class="category-level2-title" >--{{item.cat_name}}--</view>
             <view class="category-level3-list" >
                   <navigator class="category-level3-list-item" v-for="(item3,index3) in item.children" :key="index3" :url="'/subPackage/good_list/good_list?cid=' + item3.cat_id">
                         <image :src="item3.cat_icon">
                           <text>{{item3.cat_name}}</text>
                         </image>
                   </navigator>
             </view>
       </view>
     </scroll-view>
   </view>
 </view>
</template>

<script>
 import badgeMix from '@/mixins/tabbar-badge.js';
  export default {
     
     mixins:[badgeMix],
    data() {
      return {
        viewHeight:0,
        CategorysList:[],
        active:0,
        // 二级分类
         CategorysListLevel2:[],
         scrolltop:0
         
      };
    },
    methods:{
      async getCategorysList(){
        let {data:result} = await uni.$http.get('/api/public/v1/categories');
        if(result.meta.status !=200){
          uni.$showError();
          return;
        }
        this.CategorysList = result.message
        this.CategorysListLevel2=result.message[0].children;
      },
      changeActive(index){
        this.active = index;
        this.CategorysListLevel2 = this.CategorysList[index].children
        this.scrolltop = this.scrolltop ? 0:1;
      },
      cateGotoSearch(){
        console.log('父组件');
        uni.navigateTo({
          url:'/subPackage/search/search'
        })
        
      }
      
    },
     onLoad(){
      let result = uni.getSystemInfoSync();
      this.viewHeight = result.windowHeight - 50
      console.log(this.viewHeight);
      this.getCategorysList()
              
    }
  }
</script>

<style lang="scss" scoped>
.category-list-box{
  display: flex;
  .left-scroll-view{
    width: 120px;
    .left-scroll-view-item{
      line-height: 40px;
      text-align: center;
      background-color: aquamarine;
      &.active{
        background-color: antiquewhite;
        position: relative;
        &::before{
          content: '';
          width: 4px;
          height: 30px;
          background-color: brown;
          position: absolute;
          left: 0;
          margin-top: 5px;
        }
      }
     
    }
  }
}
.right-scroll-view-item-title{
  background-color: white;
  .category-level2-title{
    text-align: center;
    padding-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
  }
  .category-level3-list{
    display: flex;
    flex-wrap: wrap;
    
    
    .category-level3-list-item{
     
      margin-left: 8px;
      display: flex;
      flex-direction: column;
      width: 30%;
      font-size: 15px;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
    image{
      width: 60px;
      height: 60px;
      
      }
    }
  }
}
</style>
